<!doctype html>
<!--
Copyright 2014 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="description" content="Sample of pre-fetching resources during service worker registration.">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Service Worker Sample: Pre-fetching Resources During Registration</title>

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="../../images/touch/chrome-touch-icon-192x192.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-title" content="Service Worker Sample: Pre-fetching Resources During Registration">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" href="../../images/apple-touch-icon-precomposed.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
    <meta name="msapplication-TileColor" content="#3372DF">

    <link rel="icon" href="../../images/favicon.ico">

    <script>
      // Service workers require HTTPS (http://goo.gl/lq4gCo). If we're running on a real web server
      // (as opposed to localhost on a custom port, which is whitelisted), then change the protocol to HTTPS.
      if ((!location.port || location.port == "80") && location.protocol != 'https:') {
        location.protocol = 'https:';
      }
    </script>

    <link rel="stylesheet" href="../../styles/main.css">
  </head>

  <body>
    <h1>Service Worker Sample: Pre-fetching Resources During Registration</h1>

    <p>Available in <a href="https://www.chromestatus.com/feature/6561526227927040">Chrome 40+</a></p>

    <p>
      This sample demonstrates basic service worker registration, in conjunction with pre-fetching of a list
      of specific resource URLs during the installation phase.
    </p>

    <p>
      Visit <code>chrome://inspect/#service-workers</code> and click on the "inspect" link below
      the registered service worker to view logging statements for the various actions the
      <code><a href="service-worker.js">service-worker.js</a></code> script is performing.
      Since most of the action takes place during the service worker's install handler, and that is
      only executed the very first time you visit this page (unless the service worker script changes),
      it can be helpful to inspect the logging in a
      <a href="https://support.google.com/chrome/answer/95464">Chrome Incognito window</a>.
    </p>

    <div class="output">
      <div id="status"></div>

      <div id="files" style="display: none">
        <p>
          Some of the resources below have been pre-fetched, and some haven't. Try disabling your network connection
          and clicking on all the links. The resources that have been pre-fetched should be served from the Service
          Worker's cache and display as expected; the resource that hasn't been pre-fetched will be unavailable.
        </p>

        <ul>
          <li><a href="static/pre_fetched.txt" target="_blank">pre_fetched.txt</a></li>
          <li><a href="static/pre_fetched.html" target="_blank">pre_fetched.html</a></li>
          <li><a href="static/not_pre_fetched.txt" target="_blank">not_pre_fetched.txt</a></li>
        </ul>
      </div>
    </div>

    <script>
      function showFilesList() {
        document.querySelector('#files').style.display = 'block';
      }

      // Helper function which returns a promise which resolves once the service worker registration
      // is past the "installing" state.
      function waitUntilInstalled(registration) {
        return new Promise(function(resolve, reject) {
          if (registration.installing) {
            // If the current registration represents the "installing" service worker, then wait
            // until the installation step (during which the resources are pre-fetched) completes
            // to display the file list.
            registration.installing.addEventListener('statechange', function(e) {
              if (e.target.state == 'installed') {
                resolve();
              } else if(e.target.state == 'redundant') {
                reject();
              }
            });
          } else {
            // Otherwise, if this isn't the "installing" service worker, then installation must have been
            // completed during a previous visit to this page, and the resources are already pre-fetched.
            // So we can show the list of files right away.
            resolve();
          }
        });
      }

      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('./service-worker.js', {scope: './'})
          .then(waitUntilInstalled)
          .then(showFilesList)
          .catch(function(error) {
            // Something went wrong during registration. The service-worker.js file
            // might be unavailable or contain a syntax error.
            document.querySelector('#status').textContent = error;
          });
      } else {
        // The current browser doesn't support service workers.
        var aElement = document.createElement('a');
        aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
        aElement.textContent = 'Service workers are not supported in the current browser.';
        document.querySelector('#status').appendChild(aElement);
      }
    </script>

    <script>
      /* jshint ignore:start */
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-53563471-1', 'auto');
      ga('send', 'pageview');
      /* jshint ignore:end */
    </script>
    <!-- Built with love using Web Starter Kit -->
  </body>
</html>
